<template>
  <div>
    <el-tabs v-model="current" tab-position="left">
      <el-tab-pane name="0" label="腾讯云">
<!--        <el-tag-->
<!--            :type="item.type"-->
<!--            closable-->
<!--            @close="onclose(index)"-->
<!--            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 25px; margin-right: 25px;"-->
<!--            v-for="(item, index) in tag"-->
<!--            :key="index"-->
<!--        >-->
<!--          {{ item.text }}-->
<!--        </el-tag>-->
        <el-form ref="asrParamForm" :model="asrParamForm" :rules="asrParamFormRule"
                 style="width: 80%; min-width: 800px"
                 label-width="140px">
          <el-form-item label="AppID" prop="appId">
            <el-input v-model="asrParamForm.paramMap.appId" autocomplete="off" placeholder="请输入appId"></el-input>
          </el-form-item>
          <el-form-item label="AppSecret" prop="secret">
            <el-input v-model="asrParamForm.paramMap.secretId" autocomplete="off"
                      placeholder="请输入secretId"></el-input>
          </el-form-item>
          <el-form-item label="AppSecret" prop="secret">
            <el-input v-model="asrParamForm.paramMap.secretKey" autocomplete="off"
                      placeholder="请输入secretKey"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" @click="onSubmit">保存</el-button>
  </div>
</template>

<script>
import request from "@/common/request"

export default {
  data() {
    return {
      current: "0",
      formData: {},
      asrParamFormRule: {
      },
      asrParamForm: {
        bindCode: "ASR_PARAM",
        bindDetail: "",
        groupCode: "00",
        id: "",
        paramMap: {
          appId: "",
          secretId: "",
          secretKey: "",
        },
      },
      wechatAppRule: {
        // "paramMap.appid": [{required: true, message: "请输入小程序AppID", trigger: "blur"}],
        // "paramMap.secret": [{required: true, message: "请输入小程序AppSecret", trigger: "blur"}],
      },
      // tag: [
      //   {
      //     type: "primary",
      //     text: "微信登录需要先申请网站应用。申请网址：https://open.weixin.qq.com",
      //   },
      // ],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const {data} = await request("get", "/system/configApi/list")
      const asrParam = data.find(item => item.bindCode === "ASR_PARAM")
      if (asrParam) {
        this.asrParamForm = {
          bindCode: "ASR_PARAM",
          bindDetail: asrParam.bindDetail,
          groupCode: asrParam.groupCode,
          id: asrParam.id,
          paramMap: {
            appId: asrParam.paramMap.appId || '',
            secretId: asrParam.paramMap.secretId || '',
            secretKey: asrParam.paramMap.secretKey || '',
          },
        }
      }
      console.log( "参数",asrParam)

    },
    async onSubmit() {
      const refs = [this.$refs.asrParamForm]
      const formData = [this.asrParamForm][this.current]
      refs[this.current].validate(async valid => {
        if (valid) {
          formData.bindDetail = JSON.stringify(formData.paramMap)
          const {code, msg} = await request("post", "/system/configApi/edit", formData)
          if (code === 0) {
            this.$message.success("保存成功")
          } else {
            this.$message.error(msg)
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped></style>
